/**Variable**/
@import './helpers/mixin.less';
@import './base/checked.less';
@import './base/common.less';
@import './base/loading.less';


.vcu-table-slots,
.vcu-table--file-form {
  display: none;
}

.vcu-table--print-frame {
  position: fixed;
  bottom  : -100%;
  left    : -100%;
  height  : 0;
  width   : 0;
  border  : 0;
}

.vcu-table--body-wrapper,
.vcu-table--fixed-left-body-wrapper,
.vcu-table--fixed-right-body-wrapper {
  overflow-y: auto;
  overflow-x: auto;
}

/*默认的渲染*/
.vcu-cell,
.vcu-table--filter-wrapper {

  .vcu-default-input,
  .vcu-default-textarea,
  .vcu-default-select {
    outline      : 0;
    padding      : 0 2px;
    width        : 100%;
    color        : @vcu-table-font-color;
    border-radius: @vcu-border-radius;
    border       : 1px solid @vcu-input-border-color;

    &:focus {
      border: 1px solid @vcu-primary-color;
    }

    &[disabled] {
      cursor          : not-allowed;
      background-color: @vcu-input-disabled-background-color;
    }
  }

  .vcu-default-input,
  .vcu-default-textarea,
  .vcu-default-select {
    height: @vcu-table-input-height-default;
  }

  .vcu-default-input {
    &[type="date"]::-webkit-inner-spin-button {
      margin-top: 4px;
    }

    &[type="date"]::-webkit-inner-spin-button,
    &[type="number"]::-webkit-inner-spin-button {
      height: 24px;
    }

    &::placeholder {
      color: @vcu-input-placeholder-color;
    }
  }

  .vcu-default-textarea {
    resize        : none;
    vertical-align: middle;
  }

  .vcu-input,
  .vcu-textarea,
  .vcu-select {
    width  : 100%;
    display: block;
  }

  .vcu-input>.vcu-input--inner,
  .vcu-textarea>.vcu-textarea--inner {
    padding: 0 2px;
  }

  .vcu-textarea--inner,
  .vcu-default-textarea {
    resize: none;
  }
}

.vcu-table--checkbox-range,
.vcu-table--cell-main-area,
.vcu-table--cell-extend-area,
.vcu-table--cell-active-area,
.vcu-table--cell-copy-area {
  display       : none;
  position      : absolute;
  pointer-events: none;
  z-index       : 1;
}

.vcu-table--fixed-left-wrapper,
.vcu-table--fixed-right-wrapper {

  .vcu-table--checkbox-range,
  .vcu-table--cell-main-area,
  .vcu-table--cell-extend-area,
  .vcu-table--cell-active-area,
  .vcu-table--cell-copy-area {
    z-index: 2;
  }
}

.vcu-table--fixed-left-wrapper {

  .vcu-table--cell-main-area,
  .vcu-table--cell-extend-area,
  .vcu-table--cell-active-area {
    &[half="1"] {
      border-right: 0;
    }
  }

  .vcu-table--cell-copy-area {
    &[half="1"] {
      background-size: @vcu-table-cell-copy-area-border-width 12px, 0 12px, 12px @vcu-table-cell-copy-area-border-width, 12px @vcu-table-cell-copy-area-border-width;
    }
  }
}

.vcu-table--fixed-right-wrapper {

  .vcu-table--cell-main-area,
  .vcu-table--cell-extend-area,
  .vcu-table--cell-active-area {
    &[half="1"] {
      border-left: 0;
    }
  }

  .vcu-table--cell-copy-area {
    &[half="1"] {
      background-size: 0 12px, @vcu-table-cell-copy-area-border-width 12px, 12px @vcu-table-cell-copy-area-border-width, 12px @vcu-table-cell-copy-area-border-width;
    }
  }
}

/*复选框-范围选择*/
.vcu-table--checkbox-range {
  background-color: @vcu-table-checkbox-range-background-color;
  border          : @vcu-table-checkbox-range-border-width solid @vcu-table-checkbox-range-border-color;
}

.vcu-table--cell-area {
  height   : 0;
  font-size: 0;
  display  : none;

  &>.vcu-table--cell-main-area {
    background-color: @vcu-table-cell-area-background-color;
    border          : @vcu-table-cell-area-border-width solid @vcu-table-cell-area-border-color;
  }

  .vcu-table--cell-main-area-btn {
    display         : none;
    position        : absolute;
    right           : -1px;
    bottom          : -1px;
    width           : 7px;
    height          : 7px;
    border-style    : solid;
    border-color    : @vcu-table-cell-main-area-extension-border-color;
    border-width    : 1px 0 0 1px;
    background-color: @vcu-table-cell-main-area-extension-background-color;
    pointer-events  : auto;
    cursor          : crosshair;
  }

  .vcu-table--cell-extend-area {
    border: @vcu-table-cell-extend-area-border-width solid @vcu-table-cell-extend-area-border-color;
  }
}

@keyframes moveCopyCellBorder {
  from {}

  to {
    background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  }
}

.vcu-table--cell-copy-area {
  background: linear-gradient(0deg, transparent 6px, @vcu-table-cell-copy-area-border-color 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, @vcu-table-cell-copy-area-border-color 0) repeat-y,
    linear-gradient(90deg, transparent 50%, @vcu-table-cell-copy-area-border-color 0) repeat-x,
    linear-gradient(90deg, transparent 50%, @vcu-table-cell-copy-area-border-color 0) repeat-x;
  background-size    : @vcu-table-cell-copy-area-border-width 12px, @vcu-table-cell-copy-area-border-width 12px, 12px @vcu-table-cell-copy-area-border-width, 12px @vcu-table-cell-copy-area-border-width;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
  animation          : moveCopyCellBorder .5s infinite linear;
}

.vcu-table--cell-active-area {
  border: @vcu-table-cell-active-area-border-width solid @vcu-table-cell-active-area-border-color;
}

.vcu-table--cell-multi-area {
  &>.vcu-table--cell-main-area {
    background-color: @vcu-table-cell-area-background-color;
  }
}

/*圆角*/
//@if @vcu-table-border-radius {
.vcu-table {
  &.is--round {
    .AllRadius {
      border-radius: @vcu-table-border-radius;
    }

    .TopRadius {
      border-radius: @vcu-table-border-radius @vcu-table-border-radius 0 0;
    }

    .TopLeftRadius {
      border-radius: @vcu-table-border-radius 0 0 0;
    }

    .TopRightRadius {
      border-radius: 0 @vcu-table-border-radius 0 0;
    }

    .BottomRadius {
      border-radius: 0 0 @vcu-table-border-radius @vcu-table-border-radius;
    }

    .BottomLeftRadius {
      border-radius: 0 0 0 @vcu-table-border-radius;
    }

    .BottomRightRadius {
      border-radius: 0 0 @vcu-table-border-radius 0;
    }

    .AllRadius;

    .vcu-table--border-line {
      .AllRadius;
    }

    &.show--head {
      &:not(.show--foot) {
        .vcu-table--body-wrapper {
          &.fixed-left--wrapper {
            .BottomLeftRadius;
          }

          &.body--wrapper {
            .BottomRadius;
          }

          &.fixed-right--wrapper {
            .BottomRightRadius;
          }
        }
      }

      .vcu-table--header-wrapper {
        &.fixed-left--wrapper {
          .TopLeftRadius;
        }

        &.body--wrapper {
          .TopRadius;
        }

        &.fixed-right--wrapper {
          .TopRightRadius;
        }
      }
    }

    &:not(.show--head) {
      &:not(.show--foot) {
        .vcu-table--body-wrapper {
          &.body--wrapper {
            .AllRadius;
          }
        }
      }
    }

    &.show--foot {
      &:not(.show--head) {
        .vcu-table--body-wrapper {
          &.fixed-left--wrapper {
            .BottomLeftRadius;
          }

          &.body--wrapper {
            .TopRadius;
          }

          &.fixed-right--wrapper {
            .BottomRightRadius;
          }
        }
      }

      .vcu-table--footer-wrapper {
        &.fixed-left--wrapper {
          .BottomLeftRadius;
        }

        &.body--wrapper {
          .BottomRadius;
        }

        &.fixed-right--wrapper {
          .BottomRightRadius;
        }
      }
    }
  }
}

//}

/*table*/
.vcu-table {
  position   : relative;
  font-size  : @vcu-font-size;
  color      : @vcu-table-font-color;
  font-family: @vcu-font-family;

  &[x-cloak] {

    .vcu-table--main-wrapper,
    .vcu-table--fixed-left-wrapper,
    .vcu-table--fixed-right-wrapper {
      visibility: hidden;
    }
  }

  .vcu-table--body-wrapper {
    background-color: @vcu-table-background-color;
  }

  .vcu-table--footer-wrapper {
    background-color: @vcu-table-footer-background-color;
  }

  .vcu-table--header,
  .vcu-table--body,
  .vcu-table--footer {
    border         : 0;
    border-spacing : 0;
    border-collapse: separate;
    table-layout   : fixed;

  }

  .vcu-table--header-wrapper,
  .vcu-table--footer-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
  }

  &:not(.is--empty) {
    &.show--foot {
      &.scroll--x {
        .vcu-table--body-wrapper {
          overflow-x: scroll;
        }
      }
    }
  }





  .vcu-body--row {

    &.row--stripe {
      color           : @vcu-row-stripe-font-color;
      background-color: @vcu-table-row-striped-background-color;
    }

    .vcu-table-bg-color();

    &.row--radio {
      color           : @vcu-row-radio-font-color;
      background-color: @vcu-table-row-radio-background-color;
    }

    &.row--checked {
      color           : @vcu-row-checked-font-color;
      background-color: @vcu-table-row-checked-background-color;

      &>td {
        background-color: inherit;
      }
    }

    &.row--current {
      color           : @vcu-row-current-font-color;
      background-color: @vcu-table-row-current-background-color;

      &>td {
        background-color: inherit;
      }
    }

    &.row--hover {
      color           : @vcu-row-hover-font-color;
      background-color: @vcu-table-row-hover-background-color;

      &.row--stripe {
        color           : @vcu-row-hover-stripe-font-color;
        background-color: @vcu-table-row-hover-striped-background-color;
      }

      &.row--radio {
        color           : @vcu-row-hover-radio-font-color;
        background-color: @vcu-table-row-hover-radio-background-color;
      }

      &.row--checked {
        color           : @vcu-row-hover-checked-font-color;
        background-color: @vcu-table-row-hover-checked-background-color;
      }

      &.row--current {
        color           : @vcu-row-hover-current-font-color;
        background-color: @vcu-table-row-hover-current-background-color;
      }
    }
  }

  &.has--tree-line {
    .vcu-body--row {
      &.row--stripe {
        .vcu-tree--btn-wrapper {
          background-color: @vcu-table-row-striped-background-color;
        }
      }

      .vcu-table-bg-color();

      &.row--radio {
        .vcu-tree--btn-wrapper {
          background-color: @vcu-table-row-radio-background-color;
        }
      }

      &.row--checked {
        .vcu-tree--btn-wrapper {
          background-color: @vcu-table-row-checked-background-color;
        }
      }

      &.row--current {
        .vcu-tree--btn-wrapper {
          background-color: @vcu-table-row-current-background-color;
        }
      }

      &.row--hover {
        .vcu-tree--btn-wrapper {
          background-color: @vcu-table-row-hover-background-color;
        }

        &.row--stripe {
          .vcu-tree--btn-wrapper {
            background-color: @vcu-table-row-hover-striped-background-color;
          }
        }

        &.row--radio {
          .vcu-tree--btn-wrapper {
            background-color: @vcu-table-row-hover-radio-background-color;
          }
        }

        &.row--checked {
          .vcu-tree--btn-wrapper {
            background-color: @vcu-table-row-hover-checked-background-color;
          }
        }

        &.row--current {
          .vcu-tree--btn-wrapper {
            background-color: @vcu-table-row-hover-current-background-color;
          }
        }
      }
    }
  }

  &.drag--resize {

    .vcu-table--main-wrapper,
    .vcu-table--fixed-left-wrapper,
    .vcu-table--fixed-right-wrapper {
      * {
        cursor: col-resize;
      }
    }
  }

  &.drag--range,
  &.drag--area {

    .vcu-table--main-wrapper,
    .vcu-table--fixed-left-wrapper,
    .vcu-table--fixed-right-wrapper {
      * {
        cursor: default;
      }
    }
  }

  &.drag--extend-range {

    .vcu-table--main-wrapper,
    .vcu-table--fixed-left-wrapper,
    .vcu-table--fixed-right-wrapper {
      * {
        cursor: crosshair;
      }
    }
  }

  &.column--highlight {
    .vcu-header--column {
      &.col--hover:not(.col--seq) {
        &:hover {
          background-color: @vcu-table-column-hover-background-color;
        }
      }
    }
  }

  &.is--area {
    .vcu-table--main-wrapper {
      user-select: none;
    }
  }

  .vcu-header--column,
  .vcu-body--column,
  .vcu-footer--column {
    position     : relative;
    //line-height: @vcu-table-row-line-height;
    text-align   : left;

    &:not(.col--ellipsis) {
      height   : @vcu-table-row-height-default;
      //padding: floor((@vcu-table-row-height-default - @vcu-table-row-line-height) / 2);
    }

    &.col--current {
      background-color: @vcu-table-column-current-background-color;

      .vcu-tree--btn-wrapper {
        background-color: @vcu-table-column-current-background-color;
      }
    }

    &.col--center {
      text-align: center;
    }

    &.col--right {
      text-align: right;
    }
  }

  &.has--tree-line {

    .vcu-header--column,
    .vcu-body--column,
    .vcu-footer--column {
      &.col--current {
        .vcu-tree--btn-wrapper {
          background-color: @vcu-table-column-current-background-color;
        }
      }
    }
  }

  .vcu-header--column,
  .vcu-footer--column {
    &.col--ellipsis {
      &.col--center {
        .vcu-cell {
          justify-content: center;
        }
      }

      &.col--right {
        .vcu-cell {
          justify-content: flex-end;
        }
      }
    }
  }

  .vcu-body--column {
    &.col--checkbox {
      user-select: none;
    }
  }

  /*边框*/
  .vcu-table--footer-wrapper {
    border-top: 1px solid @vcu-table-border-color;
  }

  &.border--default,
  &.border--full,
  &.border--outer {
    .vcu-table--header-wrapper {
      background-color: @vcu-table-header-background-color;
    }
  }

  &.border--default,
  &.border--inner {

    .vcu-header--column,
    .vcu-body--column,
    .vcu-footer--column {
      background-image   : linear-gradient(@vcu-table-border-color, @vcu-table-border-color);
      background-repeat  : no-repeat;
      background-size    : 100% 1px;
      background-position: right bottom;
    }
  }

  &.border--full {

    .vcu-header--column,
    .vcu-body--column,
    .vcu-footer--column {
      background-image   : linear-gradient(@vcu-table-border-color, @vcu-table-border-color), linear-gradient(@vcu-table-border-color, @vcu-table-border-color);
      background-repeat  : no-repeat;
      background-size    : 1px 100%, 100% 1px;
      background-position: right top, right bottom;
    }

    .vcu-table--fixed-left-wrapper {
      border-right: 1px solid @vcu-table-border-color;

      .vcu-body--column {
        border-right-color: @vcu-table-border-color;
      }
    }
  }

  &.border--inner,
  &.border--none {
    .vcu-table--header-wrapper {
      background-color: @vcu-table-background-color;
    }

    .vcu-table--fixed-left-wrapper {
      border-right: 0;
    }
  }

  &.border--inner {
    .vcu-table--border-line {
      border-width: 0 0 1px 0;
    }
  }

  &.border--none {
    .vcu-table--border-line {
      display: none;
    }

    .vcu-table--header-border-line {
      display: none;
    }
  }

  &.size--large {
    font-size: @vcu-font-size-large;

    .vcu-table--empty-placeholder,
    .vcu-table--empty-block {
      min-height: @vcu-table-row-height-large;
    }

    .vcu-header--column,
    .vcu-body--column,
    .vcu-footer--column {
      &:not(.col--ellipsis) {
        height   : @vcu-table-row-height-large;
        //padding: floor((@vcu-table-row-height-large - @vcu-table-row-line-height) / 2);
      }
    }

    .vcu-cell {

      .vcu-default-input,
      .vcu-default-textarea,
      .vcu-default-select {
        height: @vcu-table-input-height-large;
      }

      .vcu-default-input {
        &[type="date"]::-webkit-inner-spin-button {
          margin-top: 3px;
        }
      }
    }
  }

  &.size--small {
    font-size: @vcu-font-size-small;

    .vcu-table--empty-placeholder,
    .vcu-table--empty-block {
      min-height: @vcu-table-row-height-small;
    }

    .vcu-header--column,
    .vcu-body--column,
    .vcu-footer--column {
      &:not(.col--ellipsis) {
        height   : @vcu-table-row-height-small;
        //padding: floor((@vcu-table-row-height-small - @vcu-table-row-line-height) / 2);
      }
    }

    .vcu-cell {

      .vcu-default-input,
      .vcu-default-textarea,
      .vcu-default-select {
        height: @vcu-table-input-height-small;
      }

      .vcu-default-input {
        &[type="date"]::-webkit-inner-spin-button {
          margin-top: 2px;
        }
      }
    }
  }

  &.size--mini {
    font-size: @vcu-font-size-mini;

    .vcu-table--empty-placeholder,
    .vcu-table--empty-block {
      min-height: @vcu-table-row-height-mini;
    }

    .vcu-header--column,
    .vcu-body--column,
    .vcu-footer--column {
      &:not(.col--ellipsis) {
        height   : @vcu-table-row-height-mini;
        //padding: floor((@vcu-table-row-height-mini - @vcu-table-row-line-height) / 2);
      }
    }

    .vcu-cell {

      .vcu-default-input,
      .vcu-default-textarea,
      .vcu-default-select {
        height: @vcu-table-input-height-mini;
      }

      .vcu-default-input {
        &[type="date"]::-webkit-inner-spin-button {
          margin-top: 1px;
        }
      }
    }
  }

  .vcu-cell {
    white-space  : pre-line;
    word-break   : break-all;
    padding-left : @vcu-table-cell-padding-left;
    padding-right: @vcu-table-cell-padding-right;
  }

  // 单元格占位符
  .vcu-cell--placeholder {
    color: @vcu-table-cell-placeholder-color;
  }

  // 单选框和复选框
  .vcu-cell--radio {
    .XERadio;
  }

  .vcu-cell--checkbox {
    .XECheckbox;
  }

  .vcu-cell--radio .vcu-radio--icon,
  .vcu-cell--checkbox .vcu-checkbox--icon {
    left: 0;
    top : 0.1em;
  }

  .vcu-cell--radio .vcu-radio--label,
  .vcu-cell--checkbox .vcu-checkbox--label {
    padding-left: 0.5em;
  }

  .vcu-cell--radio,
  .vcu-cell--checkbox {
    padding-left: 1.2em;
  }

  .fixed--hidden {
    visibility: hidden;
  }

  .vcu-table--fixed-left-wrapper,
  .vcu-table--fixed-right-wrapper {
    width           : 100%;
    position        : absolute;
    top             : 0;
    z-index         : 1;
    overflow        : hidden;
    background-color: inherit;

    .vcu-table--body-wrapper {
      overflow-x: hidden;
    }
  }

  &.show--head {

    .vcu-table--fixed-left-wrapper,
    .vcu-table--fixed-right-wrapper {
      .vcu-table--body-wrapper {
        &:before {
          display: none;
        }
      }
    }
  }

  .vcu-table--fixed-left-wrapper {
    left : 0;
    width: 200px;

    & ::-webkit-scrollbar {
      /* display: none; */
      width: 0;
    }

    &.scrolling--middle {
      box-shadow: 4px 3px 4px 0px rgba(0, 0, 0, 0.12);
    }
  }

  .vcu-table--fixed-right-wrapper {
    right: 0;

    &.scrolling--middle {
      box-shadow: -4px 3px 4px 0px rgba(0, 0, 0, 0.12);
    }
  }

  .vcu-table--header-wrapper,
  .vcu-table--body-wrapper,
  .vcu-table--footer-wrapper {
    position: relative;

    &.fixed-left--wrapper,
    &.fixed-right--wrapper {
      position: absolute;
      top     : 0;
    }

    &.fixed-left--wrapper {
      left: 0;

      ::-webkit-scrollbar-thumb,
      ::-webkit-scrollbar {
        display: none;
      }
    }

    &.fixed-right--wrapper {
      right     : 0;
      overflow-y: auto;
    }
  }

  .vcu-body--x-space {
    width        : 100%;
    height       : 1px;
    margin-bottom: -1px;
  }

  .vcu-body--y-space {
    width: 0;
    float: left;
  }

  /*列宽线*/
  .vcu-table--resizable-bar {
    display : none;
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 1px;
    height  : 100%;
    z-index : 4;
    cursor  : col-resize;

    &:before {
      content         : "";
      display         : block;
      height          : 100%;
      background-color: @vcu-table-resizable-color;
    }
  }

  /*边框线*/
  .vcu-table--border-line {
    position      : absolute;
    top           : 0;
    left          : 0;
    width         : 100%;
    height        : 100%;
    z-index       : 3;
    pointer-events: none;
    border        : 1px solid @vcu-table-border-color;
  }

  /*树形节点*/
  &.has--tree-line {
    .vcu-body--row {
      &:first-child {
        .vcu-tree--line {
          border-width: 0 0 1px 0;
        }
      }
    }

    .vcu-body--row {
      .vcu-body--column {
        background-image: none;
      }
    }

    .vcu-tree--btn-wrapper {
      background-color: @vcu-table-background-color;
    }
  }

  .vcu-tree--line-wrapper,
  .vcu-relation--line-wrapper {
    position: relative;
    display : block;
    height  : 0;
  }

  .vcu-tree--line {
    content       : "";
    position      : absolute;
    bottom        : -0.9em;
    width         : 0.8em;
    border-width  : 0 0 1px 1px;
    border-style  : dotted;
    border-color  : @vcu-table-tree-node-line-color;
    pointer-events: none;
  }

  .vcu-relation--line-wrapper+.vcu-cell {
    padding-left: 1em !important;
  }

  .vcu-relation--line {
    content       : " ";
    position      : absolute;
    width         : 0.8em;
    border-style  : solid;
    border-color  : @vcu-table-relation-line-color;
    pointer-events: none;
  }

  .vcu-relation--line-empty {
    border-width: 0;
  }

  .vcu-relation--line-start {
    bottom      : -1.8em;
    height      : @vcu-table-row-height-default / 2;
    border-width: 2px 0 0 2px;
  }

  .vcu-relation--line-among {
    bottom      : -1.8em;
    height      : @vcu-table-row-height-default;
    border-width: 0 0 0 2px;
  }

  .vcu-relation--line-end {
    bottom      : -0.8em;
    height      : @vcu-table-row-height-default / 2 + 10px;
    border-width: 0 0 2px 2px;
  }


  &.size--large {
    .vcu-relation--line-start {
      height: @vcu-table-row-height-large / 2;
    }

    .vcu-relation--line-among {
      height: @vcu-table-row-height-large;
    }

    .vcu-relation--line-end {
      height: @vcu-table-row-height-large / 2 + 10px;
    }
  }

  &.size--small {
    .vcu-relation--line-start {
      height: @vcu-table-row-height-small / 2;
    }

    .vcu-relation--line-among {
      height: @vcu-table-row-height-small;
    }

    .vcu-relation--line-end {
      height: @vcu-table-row-height-small / 2 + 5px;
    }
  }

  &.size--mini {
    .vcu-relation--line-start {
      height: @vcu-table-row-height-mini / 2;
    }

    .vcu-relation--line-among {
      height: @vcu-table-row-height-mini;
    }

    .vcu-relation--line-end {
      height: @vcu-table-row-height-mini / 2 + 5px;
    }
  }


  .vcu-cell--tree-node {
    position: relative;
  }

  .vcu-tree--btn-wrapper {
    position   : absolute;
    top        : 50%;
    width      : 1em;
    height     : 1em;
    text-align : center;
    transform  : translateY(-50%);
    z-index    : 1;
    user-select: none;
    cursor     : pointer;

    .iconfont {
      position: relative;
      top     : -5px;
    }
  }

  .vcu-tree--node-btn {
    display: block;
    color  : lighten(@vcu-table-font-color, 20%);

    &:hover {
      color: @vcu-table-font-color;
    }
  }

  .vcu-tree-cell {
    display     : block;
    padding-left: 1.5em;
  }

  .vcu-body--column {
    &.col--ellipsis {
      &>.vcu-cell {
        .vcu-tree-cell {
          overflow     : hidden;
          text-overflow: ellipsis;
          white-space  : nowrap;
        }
      }
    }
  }

  /*展开行*/
  .vcu-table--expanded {
    cursor  : pointer;
    position: relative;
    top     : -2px;

    .vcu-table--expand-btn {
      width      : 1em;
      height     : 1em;
      text-align : center;
      user-select: none;
      color      : lighten(@vcu-table-font-color, 20%);

      &:hover {
        color: @vcu-table-font-color;
      }
    }

    &+.vcu-table--expand-label {
      padding-left: 0.5em;
    }
  }

  .vcu-body--expanded-column {
    border-bottom: 1px solid @vcu-table-border-color;

    &.col--ellipsis {
      &>.vcu-body--expanded-cell {
        overflow     : hidden;
        text-overflow: ellipsis;
        white-space  : nowrap;
      }
    }
  }

  .vcu-body--expanded-cell {
    padding: 20px;
  }

  /*设置列高度*/
  &.vcu-editable {
    .vcu-body--column {
      height: @vcu-table-row-height-default;
    }

    &.size--large {
      .vcu-body--column {
        height: @vcu-table-row-height-large;
      }
    }

    &.size--small {
      .vcu-body--column {
        height: @vcu-table-row-height-small;
      }
    }

    &.size--mini {
      .vcu-body--column {
        height: @vcu-table-row-height-mini;
      }
    }
  }

  /*溢出列*/
  .vcu-header--column,
  .vcu-body--column,
  .vcu-footer--column {
    &.col--ellipsis {
      height: @vcu-table-row-height-default;

      &:not(.col--actived) {
        &>.vcu-cell {
          overflow     : hidden;
          text-overflow: ellipsis;
          white-space  : nowrap;
        }
      }

      &>.vcu-cell {
        max-height: @vcu-table-row-height-default;
      }
    }
  }

  &.size--large {

    .vcu-header--column,
    .vcu-body--column,
    .vcu-footer--column {
      &.col--ellipsis {
        height: @vcu-table-row-height-large;

        &>.vcu-cell {
          max-height: @vcu-table-row-height-large;
        }
      }
    }

    .vcu-cell--checkbox .vcu-checkbox--icon,
    .vcu-cell--radio .vcu-radio--icon {
      font-size: @vcu-radio-font-size-large;
    }
  }

  &.size--small {

    .vcu-header--column,
    .vcu-body--column,
    .vcu-footer--column {
      &.col--ellipsis {
        height: @vcu-table-row-height-small;

        &>.vcu-cell {
          max-height: @vcu-table-row-height-small;
        }
      }

      .vcu-cell {
        padding-left : @vcu-table-cell-padding-left / 2;
        padding-right: @vcu-table-cell-padding-right / 2;
      }
    }

    .vcu-cell--checkbox .vcu-checkbox--icon,
    .vcu-cell--radio .vcu-radio--icon {
      font-size: @vcu-radio-font-size-small;
    }
  }

  &.size--mini {

    .vcu-header--column,
    .vcu-body--column,
    .vcu-footer--column {
      &.col--ellipsis {
        height: @vcu-table-row-height-mini;

        &>.vcu-cell {
          max-height: @vcu-table-row-height-mini;
        }
      }

      .vcu-cell {
        padding-left : @vcu-table-cell-padding-left / 2 - 1;
        padding-right: @vcu-table-cell-padding-right / 2 - 1;
      }
    }

    .vcu-cell--checkbox .vcu-checkbox--icon,
    .vcu-cell--radio .vcu-radio--icon {
      font-size: @vcu-radio-font-size-mini;
    }
  }

  /*暂无数据*/
  .vcu-table--empty-placeholder,
  .vcu-table--empty-block {
    min-height     : @vcu-table-row-height-default;
    justify-content: center;
    align-items    : center;
    text-align     : center;
    overflow       : hidden;
    width          : 100%;
    pointer-events : none;
  }

  .vcu-table--empty-block {
    display   : none;
    visibility: hidden;
  }

  .vcu-table--empty-placeholder {
    display : none;
    position: absolute;
    top     : 0;
    z-index : 8;
  }

  .vcu-table--empty-content {
    display       : block;
    width         : 50%;
    pointer-events: auto;
    padding       : 10px 0;
  }

  .vcu-table--empty-img {
    width          : 40px;
    height         : 40px;
    margin         : 0 auto;
    background     : url() no-repeat;
    background-size: 100% 100%;
  }

  .vcu-table--empty-text {
    line-height: 2.5;
  }

  &.is--empty {

    .vcu-table--empty-block,
    .vcu-table--empty-placeholder {
      display: flex;
    }
  }

  .vcu-body--column {
    &.col--selected {
      box-shadow: inset 0px 0px 0px 2px @vcu-primary-color;
    }
  }

  /*校验不通过*/
  .vcu-body--column {

    &.col--actived,
    &.col--selected,
    &.col--dirty {
      position: relative;
    }

    &.col--valid-error {
      .vcu-cell--valid {
        width         : 320px;
        position      : absolute;
        bottom        : calc(100% + 4px);
        left          : 50%;
        transform     : translateX(-50%);
        text-align    : center;
        pointer-events: none;
        z-index       : 2;

        .vcu-cell--valid-msg {
          display         : inline-block;
          border-radius   : @vcu-border-radius;
          padding         : 1px 4px;
          font-size       : 13px;
          color           : @vcu-table-validate-tooltip-error-color;
          background-color: @vcu-table-validate-tooltip-error-background-color;
          pointer-events  : auto;
        }
      }

      .vcu-default-input,
      .vcu-default-textarea,
      .vcu-default-select {
        border-color: @vcu-table-validate-error-color;
      }

      .vcu-input {
        >.vcu-input--inner {
          border-color: @vcu-table-validate-error-color;
        }
      }

    }
  }

  .vcu-body--row {
    &:first-child {
      .vcu-cell--valid {
        bottom: auto;
        top   : calc(100% + 4px);
      }
    }
  }

  .vcu-body--column {
    &:first-child {
      .vcu-cell--valid {
        left      : 10px;
        transform : translateX(0);
        text-align: left;
      }
    }
  }

  /*可编辑*/
  &.vcu-editable {
    &.c--highlight {
      .vcu-body--column {
        &.col--actived {
          box-shadow: inset 0px 0px 0px 2px @vcu-primary-color;

          &.col--valid-error {
            box-shadow: inset 0px 0px 0px 2px @vcu-table-validate-error-color;
          }

          .vcu-cell {

            .vcu-default-input,
            .vcu-default-textarea {
              border : 0;
              padding: 0;
            }

            .vcu-default-input {
              height: @vcu-table-row-line-height;
            }

            .vcu-input {
              .vcu-input--inner {
                border      : 0;
                padding-left: 0;
              }
            }

            .vcu-textarea {
              height: @vcu-table-row-line-height - 1;

              .vcu-textarea--inner {
                border: 0;
              }
            }
          }
        }
      }
    }

    .vcu-body--column {
      padding: 0;

      &.col--actived {
        padding: 0;
      }

      &.col--dirty {
        &:before {
          content     : "";
          top         : -@vcu-table-cell-dirty-width;
          left        : -@vcu-table-cell-dirty-width;
          position    : absolute;
          border-width: @vcu-table-cell-dirty-width;
          border-style: solid;
          border-color: transparent @vcu-table-cell-dirty-color transparent transparent;
          transform   : rotate(45deg);
        }
      }
    }
  }

  /* 分页 */
  .vcu-pagination {
    padding         : @vcu-table-pagination-padding;
    background-color: @vcu-table-pagination-background-color;

    &.vcu-pagination-right {
      text-align: right;
    }

    &.vcu-pagination-left {
      text-align: left;
    }

    &.vcu-pagination-center {
      text-align: center;
    }
  }

  /* 预设背景颜色 */
  .vcu-header--column,
  .vcu-body--column,
  .vcu-footer--row,
  .vcu-footer--column {
    .vcu-table-bg-color()
  }
}

/* 列选择 */
.vcu-custom--wrapper {
  position  : relative;
  max-height: 400px;
  overflow-y: auto;

  .vcu-custom--header {
    border-bottom: 1px solid #e1e1e1;
  }

  .vcu-custom--body,
  .vcu-custom--header {
    box-sizing: border-box;
    margin    : 0;
    padding   : 5px 15px;

    &>li {
      display: block;
      cursor : pointer;
      padding: 0.4em 1em;
      .XECheckbox;

      @levelList: 2,
      3,
      4,
      5,
      6,
      7,
      8;

      .level-loop(@counter) when (@counter > 0) {
        @class: extract(@levelList, @counter);

        &.level--@{class} {
          padding-left: (15px * extract(@levelList, @counter));

          /* .vcu-checkbox--icon {
            left: (5px * extract(@levelList, @counter));
          } */
        }

        .level-loop((@counter - 1));
      }

      .level-loop(7);

      .vcu-checkbox--icon {
        top: .55em;
      }

      .vcu-checkbox--label {
        display    : inline-block;
        margin-left: 2em;
      }
    }

    .vcu-custom--option {
      &:hover {
        background-color: @vcu-table-row-hover-background-color;
      }
    }
  }

  .vcu-column-selection-icon {
    color : #999;
    cursor: move;
  }
}

.vcu-filter-content {
  &-header {
    padding      : 10px 15px;
    border-bottom: 1px dashed #e1e1e1;
  }

  .vcu-container-warp {
    height    : 200px;
    padding   : 5px 15px;
    width     : 100%;
    overflow-x: hidden;
  }

  &-col {
    padding: 5px 15px;
  }
}